@charset 'utf-8';
@import './skin.scss';

/* Dialog
-------------------------- */
.el-dialog{
    background: $bg_card;
    .el-dialog__header{
        border-bottom: 1px solid $bg_light;
        .el-dialog__title{
            color: $font_5;
        }
    }
    .el-dialog__body{
        padding: 24px 24px 24px 24px;
    }
    .el-dialog__footer{
        border-top: 1px solid $bg_light;
        padding: 12px 16px;
    }
    .el-row{
        margin-bottom: 8px;
        &:last-child{
            margin-bottom: 0px;
        }
    }
}

/* Input
-------------------------- */

.el-input__inner{ //边框颜色 不放el-input里，因为daterange也会用到
    border: 1px solid $bg_light;
}

.el-textarea{
    .el-textarea__inner{
        border: 1px solid $bg_light;
        &:focus{
            border: 1px solid $vi;
        }
    }
}

.el-input-number{
    width: 100%;
    input.el-input__inner{
        text-align: left
    }
}
.el-input-number__decrease{
    background: $bg_light;
    border-right: 1px solid $bg_light;
}
.el-input-number__increase{
    background: $bg_light;
    border-left: 1px solid $bg_light;
}

.el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease{
    height: 14px;
    background: $bg_light;
    border-color: $bg_card;
}

.el-input.is-disabled .el-input__inner{
    border-color: $tab_header;
    color: $icon;
}

.tr-container .el-input__suffix-inner .fa{
    font-size: 10px;
}

.el-input .el-input__inner{
    background-color: $bg_card;
}

.el-input__inner.el-range-editor{
    background-color: $bg_card;
}

.el-select .el-input.is-disabled .el-input__inner:hover{
    border-color: $input_bg
}


/* Select
-------------------------- */
.el-popper[x-placement^="bottom"]{
    margin-top: 4px;
    .popper__arrow{ //下拉箭头颜色
        border-bottom-color: $bg_light;
        &::after{
            border-bottom-color: $bg_light;
        }
    }
} 

.el-scrollbar{
    .el-select-dropdown__item{
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        span{
            font-size: 11px;
        }
        .fl{
            max-width: 200px;
            margin-right: 30px;
        }
        .fr{
            max-width: 60px;
        }
    }
    //下拉hover背景色
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
        background: $input_bg;
    }
    .is-disabled{
        color: $disabled;
    }
}
p.el-select-dropdown__empty{
    color: $font;
}

.el-select{
    width: 100%;
    .el-select__tags{
        .el-tag{
            background: $bg_light;
            margin: 2px 0 2px 4px;
        }
    }
}
.el-select.red{
    input{
        color: $red;
    }
}
.el-select.green{
    input{
        color: $green;
    }
}

/* TimePicker DatePicker
-------------------------- */

.el-date-editor{
    input{
        background: $bg_card;
    }
}

.el-date-range-picker,.el-date-picker{
    background: $bg_light;
    .el-picker-panel__body{
        .el-date-picker__header{
            .el-date-picker__header-label{ //日期颜色
                color: $font_5;
            }
        }
    }
    .el-picker-panel__content{
        // border-top: 1px solid $input_bg;
        margin-bottom: 0px;
        .el-date-table th{ //线
            border-bottom: 1px solid $input_bg;
            color: $font_5;
        }
    }  
    
    //日期范围选择的样式
    .el-date-range-picker__content{
        .el-date-table{
            .in-range{ //选中的背景色
                div{
                    background: $input_bg;
                }
            }
        }
    }
}

//range 的input中的样式
.el-date-editor--daterange{
    .el-range__icon{
        line-height: 24px;
        color: $icon;
    }
    .el-range-separator{
        line-height: 24px;
    }
    .el-range__close-icon{
        line-height: 24px;
        color: $icon;
    }
    .el-range-input{
        color: $font_5;
    }
}

.el-date-editor .el-range__close-icon{
    width: 10px;
}

//日期范围选择，日期范围选择宽度
.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
    width:100%;
}

//选择日期的宽度
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:100%;
}

//时间点选择整体样式
.el-popper{
    background: $bg_light;
    .el-time-spinner{
        .el-time-spinner__item.disabled{
            color: $disabled;
        }
        .el-scrollbar__view{
            li:hover{
                background: $input_bg
            }
        }
        .active{
            font-weight: bold;
            color: $vi
        }
    }

    .el-time-panel__footer{
        background: $bg_light;
    }
    .el-time-panel__content::after, .el-time-panel__content::before{
        border-top: 1px solid $icon;
        border-bottom: 1px solid $icon;
    }
}

//固定时间
.el-picker-panel{
    .el-scrollbar{
        .el-picker-panel__content{
            .time-select-item:hover{
                background: $input_bg
            }
            .disabled{
                color: $disabled;
                &:hover{
                    cursor: not-allowed;
                }
            }

        }
    }
}

//时间范围选择
.el-range-editor{
    .el-range__icon{
        line-height: 20px;
        color: $icon;
    }
    .el-range-separator{
        line-height: 20px;
    }
    .el-range__close-icon{
        line-height: 20px;
        color: $icon;
    }
}

//时间范围选择
.el-time-range-picker{
    .el-time-range-picker__body{
        border: 1px solid $input_bg;
    }
}

/* Badge 
-------------------------- */
.el-badge__content{
    border: none;

}

/* Card 
-------------------------- */
.el-card{
    background: $bg_card;
    .el-card__header{
        border-bottom: 1px solid $bg_light
    }
}

/* Table 
-------------------------- */
//size: mini:  small:30px  medium:
.el-table--small{
    th, td{
        padding: 0px 0;
    }
    
    //排序图标位置，原有的高度会将头部高度撑高
    .caret-wrapper{
        height: 23px;
        .sort-caret.ascending{
            top: 0px;
        }
        .sort-caret.descending{
            bottom: 0px;
        }
    }
}
.el-table{
    background: $bg_card;
    .cell{
        transform: translateZ(0);
        white-space: nowrap;
        line-height: 25px;
        font-family: Consolas, Monaco, monospace,"Microsoft YaHei",sans-serif;
    }
    .blink-cell .cell{
        padding: 0;
        .tr-table-cell {
            padding: 0 10px;
        }
    }
    th{
        background: $tab_header; //头部的颜色
        color: $font;
    }
    tr{
        background: $bg_card; //表格内容的背景
        color: $font_5;
    }
    .el-table__body-wrapper{
        background: $bg_card;
    }

    .el-table__empty-block .el-table__empty-text{
        color: $input_bg
    }
    .el-input{
        .el-input__inner{
            border-radius: 0;
        }
    }
    .selected-bg{
        background:  $bg_light
    }
    .el-radio{
        padding: 0px;
    }
    .el-table__empty-block{
        padding-bottom: 25px;
        box-sizing: border-box;
    }
}
//改变hover背景颜色
.el-table--enable-row-hover .el-table__body tr:hover>td{
    background: $bg_light;
}

/* Collapse 
-------------------------- */
.el-collapse{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    .el-collapse-item{
        transform: translateZ(0);
        margin-bottom: 8px;
        &:last-child{
            margin-bottom: 0px;
        }
        .el-collapse-item__header{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: $font_5;
            padding-left: 10px;
            background: $tab_header;
        }
        .el-collapse-item__wrap{
            // border-top: 1px solid $bg_light;
            .el-collapse-item__content{
                font-size: 14px;
                padding-bottom: 0px;
            }
        }
    }
}

/* Button 
-------------------------- */
.el-button{
    border: none;
}

.el-button:hover, .el-button:focus{
    color: #fff;
}

.el-button.el-button--default{
    box-sizing: border-box;
    background: $bg_light;
    &:hover{
        border: none;
        background: $input_bg;
    }
    &:focus{
        border: none;
        background: $input_bg;

    }
    .el-icon-loading {
        color: #fff;
    }
}
.el-button.el-button--default.el-button--primary{
    background-color: $vi;
    border-color: $vi;
}


.el-button.el-button--mini{
    padding: 7px 10px;
}

.el-message-box__btns{
    .el-button--primary:hover{
        background: lighten($vi, 20%); //颜色变浅
    }
}

/* Tabs 
-------------------------- */
.el-dialog__wrapper{
    position: fixed !important;
}

.el-tabs{
    height: 100%;
    .el-tabs__content{
        height: calc(100% - 40px);
        overflow: inherit;
        .el-tab-pane{
            height: 100%;
            &>div{
                position: relative;
                height: 100%;
            }
        }
    }
    .el-tabs__header{
        margin-bottom: 1px;
        .el-tabs__nav-wrap{
            padding-left: 10px;
            &::after{
                background-color: $bg_light;
                height: 1px;
            }
        }
        .el-tabs__nav{
            .el-tabs__active-bar {
                height: 1px !important;
            }
        }
    }
}

/* Form 
-------------------------- */
.el-form{
    .el-form-item{
        margin-bottom: 10px;
        &:last-child{
            margin-bottom: 0px;
        }
        .el-form-item__content{
            color: $font_5;
        }
    }
    //form验证中填入正确值的时候，边框不变色
    .el-form-item.is-success .el-input__inner,  .el-form-item.is-success .el-textarea__inner{
        border-color: $bg_light
    }

    .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner:focus{
        border-color: $vi
    }

    //报错上面间距
    .el-form-item__error{
        padding-top: 0px;
    }
    
    
}

/* Message Box
-------------------------- */
.el-message-box{
    background: $bg_card;
    border-color: $bg_card;
}

/* Notification
-------------------------- */
.el-notification{
    background: $bg_light
}

/* Loading
-------------------------- */
.el-loading-mask{
    background: rgba(0, 0, 0, 0.6)
}

.el-message-box{
    vertical-align: top;
    margin-top: 20vh;
}

/* Dropdown
-------------------------- */
.el-dropdown-menu{
    border: 0;
}
/* Breadcrumb
-------------------------- */
.el-breadcrumb{
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    .scd{
        font-size: 14px;
        color: $title;
    }
}



// el-popover el-popper
.el-popover.el-popper{
    border: 1px solid $tab_header;
    border-radius: 5px;
    background: $tab_header;
    
    .popper__arrow{
        bottom: -7px;
    }
    .popper__arrow::after{
        border-top-color: $tab_header;
    }
}
.el-popper[x-placement^="top"] .popper__arrow{
    border-top-color: $tab_header;
}

.el-popper[x-placement^="top"] .popper__arrow::after{
    bottom: 0px;
    border-top-color: $tab_header;
    border-bottom-width: 0px;
}


//el-aside
.el-aside{
    transform: translateZ(0)
}


/* Radio
-------------------------- */
.el-radio{
    padding: 8px 0;
}

/* Switch
-------------------------- */
.el-switch.is-checked .el-switch__core::after{
    margin-left: -12px;
}
.el-switch__core{
    width: 35px !important;
    height: 15px;
}
.el-switch__core:after{
    width: 11px;
    height: 11px;
}

/* Tag
-------------------------- */
.el-tag{
    height: 18px; 
    line-height: 18px; 
    font-size: 12px;
}

// notify
.el-notification__content{
    p{
        word-break: break-all
    }
}


//checkbox
.el-checkbox__inner{
    background: $bg_light;
    border: none;
}


//二级菜单悬浮定位，所以无法属于哪个class下
.el-menu--vertical{
    background: $bg_light;
    .el-menu{
        background: $bg_light;
        li:hover{
            background: $font;
            color: $vi;
        }
    }
    .el-menu--popup{
        padding: 0px;
        min-width: 120px;
    }
    .el-menu--popup-right-start{
        margin: 0px;
        .el-menu-item{
            height: 40px;
            line-height: 40px;
        }
    }
}